<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
	<style>
		#app{
			position: absolute;
			left: 0px;
			top: 0px;
			width: 100px;
			height: 200px;
			background-color: pink;
		}
	</style>
</head>
<body>
<script src='http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js'></script>
<!-- <script src="https://cdn.bootcss.com/vue/2.5.8/vue.js"></script> -->
<!-- <script src='https://cdn.jsdelivr.net/vue.router/0.7.10/vue-router.min.js'></script> -->
<div id="root">
	<div id='app' v-drag-directive><p>拖拽</p></div>
</div>	
<script>
	Vue.directive('drag-directive',{
		bind:function(el){ //inserted 钩子函数:当元素被插入父元素时触发,可省略
		  console.log(this)
		  let oDiv=this.el; //el --> 触发的DOM元素
		  console.log(el)
		  oDiv.onselectstart = function(){
		  	return false;
		  }
		  oDiv.onmousedown=function(e){
		    let l=e.clientX-oDiv.offsetLeft;
		    let t=e.clientY-oDiv.offsetTop;
		    document.onmousemove=function(e){
		      oDiv.style.left=e.clientX-l+'px';
		      oDiv.style.top=e.clientY-t+'px';
		    };
		    oDiv.onmouseup=function(){
		      document.onmousemove=null;
		      oDiv.onmouseup=null;
		    }
		  }
		}
	});
	// var comp = Vue.extend({
	// 	directives : {
	// 		'dragDirective' : {
	// 			inserted:function(el){ //inserted 钩子函数:当元素被插入父元素时触发,可省略
	// 			  let oDiv=el; //el --> 触发的DOM元素
	// 			  console.log(el)
	// 			  oDiv.onmousedown=function(e){
	// 			    let l=e.clientX-oDiv.offsetLeft;
	// 			    let t=e.clientY-oDiv.offsetTop;
	// 			    document.onmousemove=function(e){
	// 			      oDiv.style.left=e.clientX-l+'px';
	// 			      oDiv.style.top=e.clientY-t+'px';
	// 			    };
	// 			    oDiv.onmouseup=function(){
	// 			      document.onmousemove=null;
	// 			      oDiv.onmouseup=null;
	// 			    }
	// 			  }
	// 			}
	// 		}
	// 	}
	// })
	var vm = new Vue({
		el : '#root',
		data : {

		}
	})
</script>
</body>
</html>